
<template>
  <!-- vite搭建的脚手架中 app中的template不会覆盖#app,而是作为其子内容 -->
  <div class="page">
    <div class="app-header">
      <!-- <van-nav-bar title="主页" /> -->
    </div>
    <div class="app-main">
      <!-- 一级视图 -->
      <router-view></router-view>
    </div>
    <div class="app-footer">
      <router-view name="footer"></router-view>
    </div>
  </div>
</template>


<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>


<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .app-header {
    background-color: grey;
  }

  .app-main {
    flex: 1;
    overflow-y: auto;
  }

  .app-footer {
    background-color: grey;
  }



}
</style>
